<template>
  <div class="container">
    <div class="header">
      <i class="el-icon-collection"></i>
      <span>样本处理信息管理</span>
    </div>
    <div class="content">
      <!-- <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: flex;">
        <el-form-item label="请输入">
          <el-input v-model="formInline.user" placeholder="请输入编码/名称/位置/经纬度/人员等信息" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" icon="el-icon-refresh-left">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-download">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-upload2">导入</el-button>
        </el-form-item>
        <el-form-item style="margin-left: auto;">
          <el-button type="primary" @click="onSubmit" icon="el-icon-plus">新建</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" ref="multipleTable" border style="width: 100%"
        @selection-change="handleSelectionChange" tooltip-effect="dark"
        :header-cell-style="{ background: '#03146b', color: '#fff', fontSize: '18px', 'text-align': 'center',padding: '16px 0' /* 调整这里的值以改变高度 */ }"
        :cell-style="{ 'text-align': 'center',fontSize: '13px' }">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="serial" label="序号" width="70">
        </el-table-column>
        <el-table-column prop="content" label="处理内容" width="150">
        </el-table-column>
        <el-table-column prop="processing" label="处理过程" width="100">
        </el-table-column>
        <el-table-column prop="protime" label="处理时间" width="130">
        </el-table-column>
        <el-table-column prop="Processors" label="处理人" width="100">
        </el-table-column>
        <el-table-column prop="experimenter" label="实验员" width="100">
        </el-table-column>
        <el-table-column prop="units" label="实验单位" width="120">
        </el-table-column>
        <el-table-column prop="time" label="实验开始时间" width="120">
        </el-table-column>
        <el-table-column prop="species" label="实验样本信息">
        </el-table-column>
        <el-table-column prop="methods" label="实验方法" width="100">
        </el-table-column> 
        <el-table-column prop="nodes" label="实验节点" width="100">
        </el-table-column>
        <el-table-column prop="finishtime" label="实验完成时间" width="100">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: center; gap: 8px;">
              <el-button size="mini" type="primary" plain icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="success" plain icon="el-icon-success"
                @click="handleEdit(scope.$index, scope.row)">确认</el-button>
              <el-button size="mini" type="danger" plain icon="el-icon-delete-solid"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
      <div style="margin-top: 20px">
        <el-button @click="selectAll">选择全部</el-button>
        <el-button @click="inverseSelection">反向选择</el-button>
        <el-button @click="toggleSelection()">清楚选择</el-button>
        <el-button @click="toggleSelection()">删除所选</el-button>
      </div>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
    </div>
    </div>
    <!-- <div class="footer">
      <div style="margin-top: 20px">
        <el-button @click="selectAll">选择全部</el-button>
        <el-button @click="inverseSelection">反向选择</el-button>
        <el-button @click="toggleSelection()">清楚选择</el-button>
      </div>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "sampleProcess",
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          serial: "IDM0001",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0002",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0001",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0002",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0001",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0002",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0001",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0002",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0001",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },
        {
          serial: "IDM0002",
          content: "处理内容",
          processing: "处理过程",
          protime: "2024-08-25 11:25:00",
          Processors: "范子昂",
          experimenter: "袁玉江",
          units: "年轮室",
          time: "2024-08-30 11:05:00",
          species: "雪岭云杉(Picea schrenkiana )",
          methods: "实验方法",
          nodes: "实验节点",
          finishtime:"2024-08-30 11:05:00"
        },


      ],
      currentPage4: 4
    };
  },
  created() { },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    onSearch() {
      console.log("search!");
    },
    selectAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 反向选择
    // 反选，重新遍历一遍数据
    inverseSelection() {
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑处理
    handleEdit(index, row) {
      console.log("Editing row:", index, row);
      // 可以弹出编辑对话框，并将选中行的数据传递进去
      this.$prompt('请输入新的名称:', row.protime, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        row.protime = value; // 更新名称字段
        this.$message({
          type: 'success',
          message: '编辑成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '编辑取消'
        });
      });
    },

    // 删除处理
    handleDelete(index, row) {
      console.log("Deleting row:", index, row);
      this.$confirm('确定删除此行数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 从表格数据中删除该行
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除取消'
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
};
</script>

<style lang="scss" scoped>
 .container {
    // padding: 1rem;
    background: #fff;
    margin-top: 1.5rem;
  }

.header {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  color: rgb(7, 46, 82);
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  background: #fff;
  /* 确保背景为白色 */
}

.content {
  margin: 5rem 2rem;
  border: #eceaeae8 1px solid;
  padding: 1rem;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block {
  display: flex;
  gap: 16px; /* Adjust gap to your preference */
  margin-top: 20px;
}


/* 这部分是增加按钮圆角的样式 */
.el-button {
  border-radius: 5px;
  /* 增大圆角 */
}

.el-button--primary {
  border-radius: 5px;
  /* 确保主要按钮也有相同的圆角 */
}
.el-input .el-input__inner {
  border: 1px solid #dcdfe6; /* 默认边框颜色 */
  box-shadow: none; /* 去掉焦点时的阴影 */
}

.el-input .el-input__inner:focus {
  border-color: #409EFF; /* 焦点时边框颜色 */
  outline: none; /* 去掉默认的焦点轮廓 */
}
</style>